<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <script src="../js/JQuery%201.9.1.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script src="share/js/knockout.js"></script>
</head>
<body>
<div class="container">
    <h3>
        <span class="glyphicon glyphicon-th-list"></span>
        <b>用户管理</b>
    </h3>
    <div class="divider bg-yt" style="height: 3px;"></div>
    <div class="row">
    	<div class="col-sm-3">
    		<div class="list-group">
  				<a href="#pane1" class="list-group-item"  data-toggle="tab">添加用户</a>
  				<a href="#pane2" class="list-group-item active"  data-toggle="tab">
  					用户管理
  				</a>
  				<a href="#pane3" class="list-group-item"  data-toggle="tab">分组管理</a>
			</div>
    	</div>
        <div class="col-lg-9">
            <div class="tab-content">
      <div class="tab-pane" id="pane1">

                                        <h3><span class="label label-default" for="username">账号</span></h3>
                                        <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="请输入账号" value="">
                                       <h3><span class="label label-default">姓名</span></h3>
                                        <input type="text" name="name" id="name" tabindex="1" class="form-control" placeholder="请输入姓名" value="">
                                       <h3><span class="label label-default">密码</span></h3>
                                        <input type="text" name="password" id="password" tabindex="1" class="form-control" placeholder="请输入密码" value="">
                                      	<div style="padding-top: 20px;">
                             				<p><a class="btn btn-primary btn-lg" href="#" role="button">保存</a></p>
                             			</div>
      </div>
      <div class="tab-pane active" id="pane2">
            <table class="table table-bordered table-center">
                <thead class="bg-yt">
                    <tr>
                        <th>账号</th>
                        <th>姓名</th>
                        <th>注册时间</th>
                        <th>用户分组</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>wang00</td>
                        <td>王老吉</td>
                        <td>2015/05/15</td>
                        <td>学生</td>
                        <td><a href=""><span class="glyphicon glyphicon-camera"></span> 编辑</a></td>
                    </tr><tr>
                        <td>2</td>
                        <td>很二</td>
                        <td>2014/02/03</td>
                        <td>学生</td>
                        <td><a href=""><span class="glyphicon glyphicon-camera"></span> 编辑</a></td>
                    </tr><tr>
                        <td>520</td>
                        <td>艾青不打折</td>
                        <td>2015/01/07</td>
                        <td>老师</td>
                        <td><a href=""><span class="glyphicon glyphicon-camera"></span> 编辑</a></td>
                    </tr><tr>
                        <td>lalala</td>
                        <td>啦啦啦</td>
                        <td>2013/11/12</td>
                        <td>学生</td>
                        <td><a href=""><span class="glyphicon glyphicon-camera"></span> 编辑</a></td>
                    </tr><tr>
                        <td>7788</td>
                        <td>七七八八</td>
                        <td>2012/08/29</td>
                        <td>学生</td>
                        <td><a href=""><span class="glyphicon glyphicon-camera"></span> 编辑</a></td>
                    </tr>
                </tbody>
            </table>
            <nav class="text-center">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
      </div>
      <div class="tab-pane" id="pane3">
            <h4>
                <b>系统用户组</b>
            </h4>
            <table class="table table-bordered table-center">
                <thead class="bg-yt">
                    <tr>
                        <th>用户组ID</th>
                        <th>用户组</th>
                        <th>组权限</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>超级管理员</td>
                        <td><a href=""> </a></td>
                    </tr><tr>
                        <td>2</td>
                        <td>管理员</td>
                        <td><a href=""><span class="glyphicon glyphicon-camera"></span> 设置</a></td>
                    </tr><tr>
                        <td>3</td>
                        <td>老师</td>
                        <td><a href=""><span class="glyphicon glyphicon-camera"></span> 设置</a></td>
                    </tr><tr>
                        <td>4</td>
                        <td>学生</td>
                        <td><a href=""><span class="glyphicon glyphicon-camera"></span> 设置</a></td>
                    </tr><tr>
                        <td>5</td>
                        <td>游客</td>
                        <td><a href=""><span class="glyphicon glyphicon-camera"></span> 设置</a></td>
                    </tr>
                </tbody>
            </table>
            <nav class="text-center">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
      </div>
      <div class="tab-pane" id="pane4">
          <p>tab4</p>
      </div>
      <div class="tab-pane" id="pane5">
          <p>tab5</p>
      </div>
    </div>
  </div>
   </div>


</div>

<script>
$('.list-group-item').on('click',function(e){
    var previous = $(this).closest(".list-group").children(".active");
    previous.removeClass('active'); // previous list-item
    $(e.target).addClass('active'); // activated list-item
});
</script>
</body>
</html>